<template>
  <div class="chart" id="ID_Humidity"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { watch, shallowRef, onMounted, reactive,defineExpose } from 'vue'
import { useVisualizingCustomerStore } from '/@/stores/visualizingCustomer'
import { storeToRefs } from 'pinia';
import { formatStringDate } from '/@/utils/formatTime'
const myChart = shallowRef(null)
const store = useVisualizingCustomerStore()
const { envDataList } = storeToRefs(store)
const setChart = (dateArray, maxHumidities, minHumidities) => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    title:
    {
      text: '近7日湿度变化',
      top: "5%",
      left: '5%',
      textStyle: {
        color: '#fff',
        fontSize: 12,
      }
    },
    legend:
    {
      data: [
        { name: '最高湿度', icon: 'circle' },
        { name: '最低湿度', icon: 'circle' },
      ],
      left: "center",
      top: "17%",
      orient: 'horizontal',
      itemWidth: 7,
      itemHeight: 7,
      itemGap: 10,
      textStyle: {
        color: '#67C3D6',
        fontSize: 10
      }
    },
    grid:
    {
      left: "5%",
      top: '35%',
      right: '5%',
      bottom: '15%'
    },
    xAxis:
    {
      axisLine: {
        lineStyle: {
          color: '#2B427F'
        }
      },
      axisLabel: {
        color: '#0DF5F8',
        fontSize: 8,
        // interval: 0,
      },
      axisTick: {
        inside: true,
        alignWithLabel: true,
        interval: 0,
        color: '#2B427F'
      },
      data: dateArray
    },

    yAxis:
    {
      type: 'value',
      scale: true,
      axisLabel: {
        color: '#61B9C8',
        showMaxLabel: false,
        fontSize: 9
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolSize: [6, 6],
        lineStyle: {
          color: '#122C49'
        }
      },
      splitLine: {
        show: false,
      }

    },
    series: [
      {
        type: 'bar',
        name: '最高湿度',
        barWidth: 10,
        barGap: '40%',
        itemStyle: {
          borderRadius: 2,
          color: '#6514FF'
        },
        data: maxHumidities,
      },
      {
        type: 'bar',
        name: '最低湿度',
        barWidth: 10,
        barGap: '40%',
        itemStyle: {
          borderRadius: 2,
          color: '#B370FD'
        },
        data: minHumidities
      },
    ]

  };
  if (!myChart.value) myChart.value = echarts.init(document.getElementById('ID_Humidity'));
  myChart.value.clear();
  myChart.value.setOption(option);
}
watch(() => envDataList.value, (newVal, oldVal) => {
  const dateArray = []
  const maxHumidities = []
  const minHumidities = []
  newVal.forEach(item => {
    dateArray.push(formatStringDate(item.equipDate,'mm-dd'))
    maxHumidities.push(item.maxhumidity)
    minHumidities.push(item.minhumidity)
  })
  setChart(dateArray, maxHumidities, minHumidities)
}, { deep: true })

const resize = () => {
  myChart.value && myChart.value.resize()
}
defineExpose({
  resize
})

</script>
<style lang="less" scoped>
.chart {
  height: 100%;
}
</style>


